<template>
  <div>
    <Card dis-hover>
      <Form :label-width="120">
        <Row type="flex" style="flex-wrap: wrap">
          <FormItem label="SPU编码">
            <Input
              v-model="formData.spuNo"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="SKU编码">
            <Input
              v-model="formData.skuNo"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="商品名称">
            <Input
              v-model="formData.productName"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>

          <FormItem label="是否主供">
            <Select v-model="formData.isMainSupply" style="width: 200px">
              <Option
                v-for="item in isMainSupplyList"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="业务区域">
            <Input
              v-model="formData.saleAreaName"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="销售省">
            <Input
              v-model="formData.saleProvinceName"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="供应商名称">
            <Input
              v-model="formData.supplyName"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="供应商编码">
            <Input
              v-model="formData.supplyUuid"
              placeholder="请输入内容"
              style="width: 200px"
            />
          </FormItem>
        </Row>
        <Row type="flex" justify="space-between">
          <Row type="flex">
            <Button
              style="margin-left: 5px"
              type="primary"
              @click="$router.push({ name: 'batchStopSupply' })"
              >批量停供</Button
            >
            <Button
              style="margin-left: 5px"
              type="primary"
              @click="$router.push({ name: 'batchRestoreSupply' })"
              >批量恢复供货</Button
            >
          </Row>
          <Row style="padding-bottom: 16px" justify="end" type="flex">
            <Button
              style="margin-left: 5px"
              type="primary"
              @click="searchOrClear('1')"
              v-if="showBtn('查询')"
              >查询</Button
            >
            <Button style="margin-left: 5px" @click="searchOrClear('0')"
              >清空</Button
            >
          </Row>
        </Row>
      </Form>
      <Row class="format_table_wrap">
        <Table :columns="columns1" :data="baseTableData" :loading="aloading">
          <template slot-scope="{ row }" slot="supplierName">
            <span>{{ row.supplyInfoDTO ? row.supplyInfoDTO.supplyName : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="supplyCategoryName">
            <span>{{ row.supplyInfoDTO ? row.supplyInfoDTO.supplyCategoryName : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="supplyManagerArea">
            <span>{{ row.supplyInfoDTO ? row.supplyInfoDTO.supplyManagerArea : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="saleCityName">
            <span>{{ row.saleCityName }}</span>
          </template>
          <template slot-scope="{ row  }" slot="isPriceSensitive">
            <span v-if="row.supplyProductInfo && row.supplyProductInfo.isPriceSensitive === '1'">是</span>
            <span v-if="row.supplyProductInfo && row.supplyProductInfo.isPriceSensitive === '2'">否</span>
          </template>
          <template slot-scope="{ row }" slot="manageArea">
            <span>{{ row.supplyProductInfo ? row.supplyProductInfo.manageArea : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="spuNo">
            <span>{{ row.supplyProductInfo ? row.supplyProductInfo.spuNo : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="productName">
            <span>{{ row.supplyProductInfo ? row.supplyProductInfo.productName : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="specDetailStr">
            <span>{{ row.supplyProductInfo ? row.supplyProductInfo.specDetailStr : '' }}</span>
          </template>
          <template slot-scope="{ row }" slot="isMainSupply">
            <span v-if="row.isMainSupply === '1'">是</span>
            <span v-else>否</span>
          </template>
          <template slot-scope="{ row }" slot="supplyState">
            <span v-if="row.supplyState == '1'">正常</span>
            <span v-else>停供</span>
          </template>
          <template slot-scope="{ row }" slot="action">
            <Button
              type="primary"
              size="small"
              @click="delItem(row)"
              v-if="showBtn('停供') && row.supplyState == '1'"
              >停供</Button
            >
          </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
          <Page
            :total="totalNum"
            transfer
            show-total
            show-sizer
            :current.sync="nowPage"
            @on-change="initData"
            @on-page-size-change="handleChangePage"
          />
        </div>
      </Row>
    </Card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import { mapGetters } from 'vuex';
import { getBtnsId } from '@/libs/btnsPermission';
export default {
  components: {},
  data () {
    return {
      aloading: false,
      formData: {
        categoryPath: '',
        spuNo: '',
        skuNo: '',
        productName: '',
        brandName: '',
        supplyUuid: '',
        supplyName: '',
        saleAreaName: '',
        saleProvinceName: ''
      },
      totalNum: 0,
      nowPage: 1,
      pageShow: 10, // 每页展示条数
      model1: '',
      columns1: [
        {
          title: '供应商代码',
          key: 'supplyUuid',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '供应商名称',
          slot: 'supplierName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '供应商主营品类',
          slot: 'supplyCategoryName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '供应商管理区域',
          slot: 'supplyManagerArea',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '是否敏感商品',
          slot: 'isPriceSensitive',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品管理区域',
          slot: 'manageArea',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '业务区域',
          key: 'saleAreaName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '销售省',
          key: 'saleProvinceName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '城市',
          slot: 'saleCityName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: 'SPU编码',
          slot: 'spuNo',
          minWidth: 150,
          align: 'center'
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品名称',
          slot: 'productName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '规格',
          slot: 'specDetailStr',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品供货状态',
          key: 'supplyGoodsState',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '是否主供',
          slot: 'isMainSupply',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '停供状态',
          slot: 'supplyState',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 150,
          align: 'center'
        }
      ],
      baseTableData: [],
      apiObj: {
        // 获取列表数据
        baseQueryList: {
          url: '/sysback/supplyarea/getProductPager?isForStopSupply=true',
          type: 'post'
        },
        // 停供
        stop: {
          url: '/sysback/supplyarea/stop',
          type: 'post'
        }
      },
      isMainSupplyList: [
        // 运费负责方
        {
          value: '1',
          label: '是'
        },
        {
          value: '2',
          label: '否'
        }
      ]
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  created () {
    this.initData();
  },
  mounted () {},
  methods: {
    initData () {
      let curBtnId = getBtnsId('查询');
      sessionStorage.setItem('buttonId', curBtnId);
      let searchParam = [];
      // searchParam.push({ name: 'categoryPath', value: this.formData.categoryPath });
      // searchParam.push({ name: 'categoryPath_q', value: 'EQ' });
      searchParam.push({ name: 'spuNo', value: this.formData.spuNo });
      searchParam.push({ name: 'spuNo_q', value: 'EQ' });
      searchParam.push({ name: 'skuNo', value: this.formData.skuNo });
      searchParam.push({ name: 'skuNo_q', value: 'EQ' });
      searchParam.push({
        name: 'productName',
        value: this.formData.productName
      });
      searchParam.push({ name: 'productName_q', value: 'Like' });
      searchParam.push({
        name: 'saleAreaName',
        value: this.formData.saleAreaName
      });
      searchParam.push({ name: 'saleAreaName_q', value: 'Like' });
      searchParam.push({
        name: 'saleProvinceName',
        value: this.formData.saleProvinceName
      });
      searchParam.push({ name: 'saleProvinceName_q', value: 'Like' });
      searchParam.push({
        name: 'isMainSupply',
        value: this.formData.isMainSupply
      });
      searchParam.push({ name: 'isMainSupply_q', value: 'EQ' });

      // searchParam.push({ name: 'brandName', value: this.formData.brandName });
      // searchParam.push({ name: 'brandName_q', value: 'Like' });
      searchParam.push({ name: 'supplyUuid', value: this.formData.supplyUuid });
      searchParam.push({ name: 'supplyUuid_q', value: 'EQ' });
      searchParam.push({ name: 'supplierName', value: this.formData.supplyName });
      searchParam.push({ name: 'supplierName_q', value: 'Like' });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam)
      };
      this.aloading = true;
      // 开始请求列表
      ApiRequest(
        this.apiObj.baseQueryList.url,
        this.apiObj.baseQueryList.type,
        data,
        false
      ).then((res) => {
        if (res.retStatus === '1') {
          this.baseTableData = res.retData.results;
          this.totalNum = res.retData.totalNum;
        }
        this.aloading = false;
      });
    },
    // 提交数据
    delItem (row) {
      let data = {
        uuid: row.uuid
      };
      let curBtnId = getBtnsId('停供');
      sessionStorage.setItem('buttonId', curBtnId);
      ApiRequest(
        this.apiObj.stop.url + '?uuid=' + row.uuid,
        this.apiObj.stop.type,
        data,
        false
      ).then((res) => {
        if (res.retStatus === '1') {
          this.$Message.success('停供成功');
          this.initData();
        }
      });
    },
    searchOrClear (type) {
      if (type === '0') {
        // 清空
        this.formData.categoryPath = '';
        this.formData.spuNo = '';
        this.formData.skuNo = '';
        this.formData.productName = '';
        this.formData.brandName = '';
        this.formData.supplyUuid = '';
        this.formData.supplyName = '';
        this.formData.isMainSupply = '';
        this.formData.saleAreaName = '';
        this.formData.saleProvinceName = '';
      }
      this.nowPage = 1;
      // this.pageShow = 10;
      this.initData();
    },
    chageRow (row, index) {
      this.baseTableData[index] = row;
    },
    handleChangePage (val) {
      this.pageShow = val;
      this.$nextTick(() => {
        this.initData();
      });
    }
  }
};
</script>
<style>
/* .ivu-table-wrapper {
        overflow: visible;
    } */
</style>
